﻿<div id="main" role="main" ng-controller="TaskCtrl" sizeelement>
    <div class="pre-loading" style="display: block;">
        <indicator-shown class="fa-2x" style="color: #2C3742"></indicator-shown>
        <span class="preloadertext">Loading...</span>
    </div>
    <div id="content" class="task-page fadeWhenChange" style="display: none;">
        <div class="row">
            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                <h1 class="page-title txt-color-blueDark"><i class="fa-fw fa fa-inbox"></i>{{taskDetail.enabled?'Task View':'Tasks'}}</h1>
            </div>
            <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
                <ul id="sparks" class="">
                    <task-completed-count></task-completed-count>
                    <task-to-do-count></task-to-do-count>
                    <following-count></following-count>
                    <follower-count></follower-count>
                </ul>
            </div>
        </div>
        <section id="task-detail" class="task-detail" ng-show="taskDetail.enabled">
            <div id="taskdetailcontrol">
                <button class="btn btn-default" type="button" ng-click="backToTasklist(taskDetail)"><i class="fa fa-chevron-left"></i> Back to list</button>
            </div>
            <div id="taskdetailiframe"></div>
        </section>
        <section class="task-search" ng-hide="taskDetail.enabled">
            <h5><i class="fa fa-fw fa-lg fa-inbox"></i>Search Tasks</h5>
            <div class="well well-sm col-md-12">
                <div class="input-group">
                    <input type="text" placeholder="Search for task..." id="fa-icon-search" class="form-control input-lg" ng-model="taskSearch.query">
                    <span class="input-group-addon"><i class="fa fa-fw fa-lg fa-search"></i></span>
                </div>
            </div>
        </section>

        <div infinite-scroll='loadMoreTasks()' infinite-scroll-distance='1' ng-hide="taskDetail.enabled">
            <task-box task="task" tindex="{{$index}}" ng-repeat="task in taskList.results" fade-in="800"></task-box>
        </div>
        <div class="task-loader" style="text-align: center; width: 100%;" ng-show="taskList.onLoading && !taskDetail.enabled">
            <indicator class="fa-2x" style="color: #2C3742" show="taskList.onLoading"></indicator>
        </div>
        <div class="alert alert-info alert-block" ng-show="taskList.noResult && !taskDetail.enabled">
            <h4 class="alert-heading">No Tasks was found!</h4>
        </div>
    </div>

</div>
